<!DOCTYPE html>
<html lang="en">
<head>
<title>切换城市</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="../../staticFile/js/common/mobileCommon.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/common.css">
<style type="text/css">
body{background:#efecec;}
html{overflow-x:hidden;-webkit-text-size-adjust:none;}
ul,li,dl,dt,dd{display:block;list-style:none;}
img{border:0;max-width:100%;height: auto;}
a{text-decoration:none;outline:none;}
hr{width: 100%;margin-block-start:0.2rem;margin-block-end:0.2rem;}
.search-city-name{width: 80%;border: 0rem;font-size: 0.6rem;float: left;margin-top: 0.2rem;margin-left:0.1rem;padding-left:0.7rem;background-size:0.6rem;background-image: url("../../staticFile/images/mobile/query.png");background-position:0.1rem;background-repeat: no-repeat;}
.current-city{margin-left:0.2rem;font-size:0.5rem;font-weight: bold;}
#goBack{margin-left: 0.2rem;font-size: 1rem;float: left;}
.lately-city{font-size: 0.5rem;}
.lately-city div{margin-left: 0.2rem;}
.lately-city span{margin-left: 0.3rem;background-color: #FFFFFF;display: block;width: 2.8rem;float: left;line-height: 1rem;text-align: center;margin-top: 0.3rem;font-weight: bold;}
.lately-city img{width: 0.5rem;height: 0.7rem;margin-top: 0.15rem;}
.container{width:100%;position:absolute;top:8.4rem;left:0;background-color:#ffffff;}
.letter{width:5%;overflow:hidden;font-size:0.5rem;position:fixed;top:1.2rem;right:0.2rem;text-align:center;z-index: 200;}
#searchCity{background-color: #FFFFFF;display: none;}
#initCity,#searchCity{width:90%;padding:0.5rem;}
#searchCityList{margin-top: -0.4rem;}
.letter ul li{margin-top: 0.1rem;}
.letter ul li a{text-decoration:none;}
.city-list{width:100%;overflow:hidden;}
.city-list .city-letter{display:inline-block;border-bottom:1px solid #e8ecf1;width:100%;font-size: 0.8rem;}
.city-list p{width:95%;border-bottom:1px solid #e8ecf1;margin-block-start: 0.3rem;margin-block-end: 0.3rem;font-size: 0.6rem;}
</style>
<script type="text/javascript" src="../../staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../../staticFile/js/common/commonUtil.js"></script>
<script type="text/javascript">
var wordArray = ['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'];
var cityJsonStr = '{"A":{"513200":"abczqzzzz_阿坝藏族羌族自治州","340800":"aq_安庆","152900":"alsm_阿拉善盟","654300":"altdq_阿勒泰地区","410500":"ay_安阳","542500":"aldq_阿里地区","210300":"as_鞍山","520400":"as_安顺","610900":"ak_安康","659100":"ale_阿拉尔","820100":"amtbxzq_澳门特别行政区","652900":"aksdq_阿克苏地区"},"B":{"220800":"bc_白城","110100":"bj_北京","130600":"bd_保定","371600":"bz_滨州","652700":"betlmgzzz_博尔塔拉蒙古自治州","652800":"byglmgzzz_巴音郭楞蒙古自治州","220600":"bs_白山","610300":"bj_宝鸡","150800":"byne_巴彦淖尔","530500":"bs_保山","522400":"bjdq_毕节地区","150200":"bt_包头","450500":"bh_北海","620400":"by_白银","451000":"bs_百色","340300":"bb_蚌埠","511900":"bz_巴中","210500":"bx_本溪"},"C":{"430100":"cs_长沙","500100":"cq_重庆","510100":"cd_成都","430700":"cd_常德","130800":"cd_承德","220100":"cc_长春","532300":"cxyzzzz_楚雄彝族自治州","652300":"cjhzzzz_昌吉回族自治州","130900":"cz_沧州","445100":"cz_潮州","150400":"cf_赤峰","140400":"cz_长治","451400":"cz_崇左","211300":"cy_朝阳","341100":"cz_滁州","542100":"cddq_昌都地区","341700":"cz_池州","320400":"cz_常州","341400":"ch_巢湖","431000":"cz_郴州"},"D":{"621100":"dx_定西","371400":"dz_德州","441900":"dz_东莞","533400":"dqczzzz_迪庆藏族自治州","533100":"dhdzjpzzzz_德宏傣族景颇族自治州","370500":"dy_东营","230600":"dq_大庆","532900":"dlbzzzz_大理白族自治州","140200":"dt_大同","511700":"dz_达州","210200":"dl_大连","510600":"dy_德阳","210600":"dd_丹东","232700":"dxaldq_大兴安岭地区"},"E":{"150600":"eeds_鄂尔多斯","420700":"ez_鄂州","421400":"estjzmzzzz_恩施土家族苗族自治州"},"F":{"210900":"fx_阜新","361000":"fz_抚州","210400":"fs_抚顺","341200":"fy_阜阳","440600":"fs_佛山","450600":"fcg_防城港","350100":"fz_福州"},"G":{"450800":"gg_贵港","513300":"gzczzzz_甘孜藏族自治州","623000":"gnczzzz_甘南藏族自治州","450300":"gl_桂林","520100":"gy_贵阳","632600":"glczzzz_果洛藏族自治州","511600":"ga_广安","640400":"gy_固原","360700":"gz_赣州","440100":"gz_广州","510800":"gy_广元"},"H":{"131100":"hs_衡水","431200":"hh_怀化","410600":"hb_鹤壁","460100":"hk_海口","632800":"hxmgzczzzz_海西蒙古族藏族自治州","330500":"hz_湖州","441600":"hy_河源","632500":"hnczzzz_海南藏族自治州","330100":"hz_杭州","421100":"hg_黄冈","441300":"hz_惠州","420200":"hs_黄石","652200":"hmdq_哈密地区","340100":"hf_合肥","231100":"hh_黑河","451100":"hz_贺州","340600":"hb_淮北","340400":"hn_淮南","451200":"hc_河池","430400":"hy_衡阳","130400":"hd_邯郸","610700":"hz_汉中","371700":"hz_荷泽","230400":"hg_鹤岗","150700":"hlbe_呼伦贝尔","230100":"heb_哈尔滨","632300":"hnczzzz_黄南藏族自治州","532500":"hhhnzyzzzz_红河哈尼族彝族自治州","632200":"hbczzzz_海北藏族自治州","653200":"htdq_和田地区","632100":"hddq_海东地区","211400":"hld_葫芦岛","320800":"ha_淮安","341000":"hs_黄山","150100":"hhht_呼和浩特"},"J":{"410800":"jz_焦作","370100":"jn_济南","620200":"jyg_嘉峪关","620300":"jc_金昌","330400":"jx_嘉兴","370800":"jn_济宁","440700":"jm_江门","220200":"jl_吉林","330700":"jh_金华","445200":"jy_揭阳","421000":"jz_荆州","360400":"jj_九江","230300":"jx_鸡西","360200":"jdz_景德镇","420800":"jm_荆门","140500":"jc_晋城","620900":"jq_酒泉","140700":"jz_晋中","210700":"jz_锦州","360800":"ja_吉安","230800":"jms_佳木斯"},"K":{"530100":"km_昆明","410200":"kf_开封","653000":"kzlskekzzzz_克孜勒苏柯尔克孜自治州","653100":"ksdq_喀什地区","650200":"klmy_克拉玛依"},"L":{"431300":"ld_娄底","620100":"lz_兰州","131000":"lf_廊坊","540100":"ls_拉萨","211000":"ly_辽阳","410300":"ly_洛阳","511100":"ls_乐山","513400":"lsyzzzz_凉山彝族自治州","542600":"lzdq_林芝地区","141100":"ll_吕梁","141000":"lf_临汾","520200":"lps_六盘水","451300":"lb_来宾","371200":"lw_莱芜","621200":"ln_陇南","350800":"ly_龙岩","371300":"ly_临沂","331100":"ls_丽水","220400":"ly_辽源","371500":"lc_聊城","530900":"lc_临沧","530700":"lj_丽江","320700":"lyg_连云港","341500":"la_六安","450200":"lz_柳州","622900":"lxhzzzz_临夏回族自治州"},"M":{"510700":"my_绵阳","340500":"mas_马鞍山","441400":"mz_梅州","511400":"ms_眉山","440900":"mm_茂名","231000":"mdj_牡丹江"},"N":{"350700":"np_南平","511000":"nj_内江","360100":"nc_南昌","350900":"nd_宁德","511300":"nc_南充","542400":"nqdq_那曲地区","533300":"njlszzzz_怒江傈僳族自治州","411300":"ny_南阳","320600":"nt_南通","320100":"nj_南京","330200":"nb_宁波","450100":"nn_南宁"},"P":{"360300":"px_萍乡","620800":"pl_平凉","510400":"pzh_攀枝花","211100":"pj_盘锦","410400":"pds_平顶山","350300":"pt_莆田"},"Q":{"370200":"qd_青岛","621000":"qy_庆阳","130300":"qhd_秦皇岛","441800":"qy_清远","522600":"qdnmzdzzzz_黔东南苗族侗族自治州","522700":"qnbyzmzzzz_黔南布依族苗族自治州","350500":"qz_泉州","421600":"qj_潜江","230200":"qqhe_齐齐哈尔","450700":"qz_钦州","522300":"qxnbyzmzzzz_黔西南布依族苗族自治州","530300":"qj_曲靖","230900":"qth_七台河"},"R":{"371100":"rz_日照","542300":"rkzdq_日喀则地区"},"S":{"330600":"sx_绍兴","441500":"sw_汕尾","310100":"sh_上海","460200":"sy_三亚","420300":"sy_十堰","361100":"sr_上饶","469000":"szxxjxzdw_省直辖县级行政单位","640200":"szs_石嘴山","231200":"sh_绥化","210100":"sy_沈阳","411200":"smx_三门峡","321300":"sq_宿迁","510900":"sn_遂宁","130100":"sjz_石家庄","411400":"sq_商丘","430500":"sy_邵阳","220300":"sp_四平","440500":"st_汕头","440300":"sz_深圳","440200":"sg_韶关","220700":"sy_松原","350400":"sm_三明","530800":"sm_思茅","230500":"sys_双鸭山","421300":"sz_随州","659200":"shz_石河子","611000":"sl_商洛","421800":"snjlq_神农架林区","140600":"sz_朔州","341300":"sz_宿州","320500":"sz_苏州","542200":"sndq_山南地区"},"T":{"130200":"ts_唐山","370900":"ta_泰安","220500":"th_通化","340700":"tl_铜陵","659300":"tmsk_图木舒克","331000":"tz_台州","610200":"tc_铜川","140100":"ty_太原","522200":"trdq_铜仁地区","654200":"tcdq_塔城地区","652100":"tlfdq_吐鲁番地区","120100":"tj_天津","150500":"tl_通辽","421700":"tm_天门","211200":"tl_铁岭","620500":"ts_天水","321200":"tz_泰州"},"W":{"371000":"wh_威海","650100":"wlmq_乌鲁木齐","420100":"wh_武汉","610500":"wn_渭南","330300":"wz_温州","370700":"wf_潍坊","659400":"wjq_五家渠","150900":"wlcb_乌兰察布","532600":"wszzmzzzz_文山壮族苗族自治州","450400":"wz_梧州","640300":"wz_吴忠","150300":"wh_乌海","340200":"wh_芜湖","620600":"ww_武威","320200":"wx_无锡"},"X":{"410700":"xx_新乡","430300":"xt_湘潭","411500":"xy_信阳","130500":"xt_邢台","350200":"xm_厦门","421200":"xn_咸宁","310200":"x_县","421500":"xt_仙桃","610400":"xy_咸阳","610100":"xa_西安","341800":"xc_宣城","532800":"xsbndzzzz_西双版纳傣族自治州","420900":"xg_孝感","630100":"xn_西宁","500200":"x_县","420600":"xf_襄樊","152500":"xlglm_锡林郭勒盟","411000":"xc_许昌","152200":"xam_兴安盟","140900":"xz_忻州","320300":"xz_徐州","360500":"xy_新余","433100":"xxtjzmzzzz_湘西土家族苗族自治州"},"Y":{"441700":"yj_阳江","632700":"ysczzzz_玉树藏族自治州","370600":"yt_烟台","420500":"yc_宜昌","654000":"ylhskzzz_伊犁哈萨克自治州","210800":"yk_营口","321000":"yz_扬州","430600":"yy_岳阳","640100":"yc_银川","222400":"ybcxzzzz_延边朝鲜族自治州","430900":"yy_益阳","610800":"yl_榆林","445300":"yf_云浮","610600":"ya_延安","530400":"yx_玉溪","140300":"yq_阳泉","320900":"yc_盐城","450900":"yl_玉林","511800":"ya_雅安","360900":"yc_宜春","511500":"yb_宜宾","140800":"yc_运城","431100":"yz_永州","230700":"yc_伊春","360600":"yt_鹰潭"},"Z":{"370300":"zb_淄博","410900":"zy_濮阳","330800":"zz_衢州","330900":"zs_舟山","370400":"zz_枣庄","441200":"zq_肇庆","442000":"zs_中山","411100":"zh_漯河","510500":"zz_泸州","640500":"zw_中卫","350600":"zz_漳州","430200":"zz_株洲","512000":"zy_资阳","321100":"zj_镇江","411700":"zmd_驻马店","430800":"zjj_张家界","510300":"zg_自贡","411600":"zk_周口","440800":"zj_湛江","520300":"zy_遵义","130700":"zjk_张家口","440400":"zh_珠海","530600":"zt_昭通","410100":"zz_郑州","341600":"zz_亳州","620700":"zy_张掖"}}';
var paramList = getParamObj();
var myCurrCityCode = paramList.cityCode, myCurrCityName = '';
$(function(){
    var cityJsonObj = eval('(' + cityJsonStr + ')');
    var cityAppendStr = '';
    //初始化城市列表
    for (var cityPinYinFirstWord in cityJsonObj){
        cityAppendStr += '<div class="city-list"><span class="city-letter" id="' + cityPinYinFirstWord + '1">' + cityPinYinFirstWord + '</span>';
        var cityObj = cityJsonObj[cityPinYinFirstWord];
        for (var cityCode in cityObj){
            var cityPinyinName = cityObj[cityCode].split("_");
            if(cityCode == myCurrCityCode){
            	myCurrCityName = cityPinyinName[1];
            }
            cityAppendStr += '<p id="' + cityCode + '" title="' + cityPinyinName[0] + '">' + cityPinyinName[1] + '</p>';
        }
        cityAppendStr += '</div>';
    }
    $('.current-city').text('当前城市：' + myCurrCityName);
    $('#initCity').append(cityAppendStr);
    //添加右侧A-Z拼音字母列表
    for(var g = 0; g < wordArray.length; g ++){
        $('.letter ul').append('<li><a href="javascript:;">' + wordArray[g] + '</a></li>');
    }
    $('.letter a').click(function () {
        var s = $(this).html();
        $(window).scrollTop($('#' + s + '1').offset().top);
    });
    $('#goBack').click(function () {
        history.back();
    });
    //选择城市
    $('.city-list p').click(function () {
        selectCity(this);
    });
    //搜索城市
    $(".search-city-name").on("change",function() {
        var queryWord = this.value.toLowerCase();
        if(queryWord == null || queryWord == ''){
            $('#searchCity').hide();
            $('#initCity,.letter').show();
            return;
        }else {
            $('#searchCity').show();
            $('#initCity,.letter').hide();
        }
        $('#searchCityList').empty();
        $('#initCity p').each(function(){
            var textValue = this.textContent, titleValue = this.title;
            if(textValue.indexOf(queryWord) >= 0 || titleValue.indexOf(queryWord) >= 0){
                $('#searchCityList').append('<p id="' + this.id + '" title="' + titleValue + '">' + textValue + '</p>');
            }
        });
        $('.city-list p').click(function () {
            selectCity(this);
        });
        if($('#searchCityList').children('p').length <= 0){
        	$('#searchCityList').text('抱歉，没找到您想要的城市');
        }
    });
    $('.lately-city span').click(function(){
        selectCity(this);
    });
    //添加最近访问
    var latelySelectedCity = myCurrCityName, latelyCity = $('#latelyCity');
    if(latelySelectedCity.length > 4){
    	latelySelectedCity = latelySelectedCity.substr(0,3) + '...';
	}
    latelyCity.append('<span style="margin-left: 0.2rem;" id="l_' + myCurrCityCode + '"><img src="../../staticFile/images/mobile/position.png">&nbsp;' + latelySelectedCity + '</span>');
    var selectedCityStr = localStorage.getItem('selectedCity');
    if (!isNull(selectedCityStr)) {
    	var selectedCityArray = selectedCityStr.split('&');
    	for(var g = 0; g < selectedCityArray.length; g ++){
            if (selectedCityArray[g].indexOf(myCurrCityCode) >= 0 || latelyCity.children('span').length > 2) {
    			continue;
    		}
    		var codeNameArray = selectedCityArray[g].split('_');
    		var latelyCityName = codeNameArray[1];
    		if(latelyCityName.length > 5){
    			latelyCityName = latelyCityName.substr(4) + '...';
    		}
            latelyCity.append('<span id="l_' + codeNameArray[0] + '">' + latelyCityName + '</span>');
    	}
    }
    //最近城市
    $('#latelyCity span').click(function () {
        selectCity(this);
    });
});
/**
 * 选择城市
 * @param cityObj
 */
function selectCity(cityObj){
    var selectedCityCode = cityObj.id.replace('l_',''), selectedCityName = cityObj.innerText;
    var historyCity = localStorage.getItem('selectedCity');
    //如果选择列表中不存在，则添加
    if (isNull(historyCity)) {
        historyCity = selectedCityCode + '_' + selectedCityName;
    } else {
        var codeName = selectedCityCode + '_' + selectedCityName;
        //如果最近访问历史记录中包含本城市
        if (historyCity.indexOf(selectedCityCode) > -1) {
            //如果是位于第一个，则替换掉第一个
            historyCity = historyCity.replace(codeName + '&', '');
            //如果不是位第一个，则替换掉后面的
            historyCity = historyCity.replace('&' + codeName, '');
        }
        historyCity = codeName + '&' + historyCity;
        //最近访问城市只保留3个城市信息
        var threeCityArray = historyCity.split('&');
        if (threeCityArray.length > 3) {
            var x = 0;
            for (var i = 0; i < 3; i++) {
                x = historyCity.indexOf('&', x + 1);
            }
            historyCity = historyCity.substr(0, x);
        }
    }
    localStorage.setItem('selectedCity', historyCity);
    localStorage.setItem('LAST_CITY_NAME_KEY', selectedCityName);
    localStorage.setItem('LAST_CITY_ID_KEY', selectedCityCode);
    var lastCity = {
        'code': selectedCityCode,
        'name': selectedCityName
    };
    localStorage.setItem('LAST_CITY', JSON.stringify(lastCity));
    var backUrl = isNull(paramList.backUrl) ? 'mIndex' : paramList.backUrl;
    window.location.href = backUrl + '.html?selectCode=' + selectedCityCode + '&selectName=' + selectedCityName;
}
/**
 * 获取参数对象
 */
function getParamObj(){
	var paramStr = location.search;
	paramStr = paramStr.split('?')[1];
	var paramArray = paramStr.split('&');
	var paramObj = new Object();
	for(var g = 0; g < paramArray.length; g ++){
		var param = paramArray[g].split('=');
		paramObj[param[0]] = param[1];
	}
	return paramObj;
}
</script>
</head>
<body>
<div style="height: 1.9rem;">
    <span id="goBack">&lt;</span>
    <input type="text" class="search-city-name" placeholder="城市/拼音首字母">
    <hr>
    <span class="current-city">当前城市：北京</span>
</div>
<div id="latelyCity" class="lately-city">
    <hr>
    <div>最近访问</div>
</div>
<div class="lately-city" style="margin-top: 1.6rem;">
    <hr>
    <div>热门城市</div>
    <span id="110100" style="margin-left: 0.2rem;">北京</span>
    <span id="440300">深圳</span>
    <span id="310100">上海</span>
    <span id="440100">广州</span>
    <span id="420100" style="margin-left: 0.2rem;">武汉</span>
    <span id="430100">长沙</span>
    <span id="410100">郑州</span>
    <span id="120100">天津</span>
</div>
<div class="container">
    <div id="searchCity">
        <div id="searchCityList" class="city-list"></div>
    </div>
    <div id="initCity"></div>
    <div class="letter">
        <ul></ul>
    </div>
</div>
</body>
</html>